/* Brown: #51423D */
/* light brown: #8C705D */
/* Beige: #968170 */
/* Green: #383B28 */
/* Pink: #E808CA */
/* Yellow: #E9D899 */

:root {
  color-scheme: light;
}


.button-deco {
  display: flex;
  align-items: center;        /* ✅ vertikal mittig */
  justify-content: center;
  gap: 24px;

  max-width: 100%;
  margin: 0 10%;
  padding: 0 10%; 

  overflow: hidden;           /* 🔒 bleibt im body */
  box-sizing: border-box;
}

/* Deko-Bilder */
.button-deco-img-L {
  display: block;             /* ✅ kein Baseline-Offset */
  height: 37px;               /* 🔥 größer & präsent */
  width: auto;                /* Verhältnis bleibt */
  flex-shrink: 0;             /* nicht zerquetschen */
  transform: translateY(-4px);
}



/* Button */
.newest-shiat-btn {
  width: 200px;
  height: 50px;
  margin-bottom: 40px;
  margin-top: 30px;
  padding: 5px 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  font-size: 2em;
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;

  background-color: #51423D;
  color: #E808CA;

  border: 2px;
  border-color:#000000;
  border-style: solid;
  border-radius: 4px;
  cursor: pointer;

  white-space: nowrap;

  transition:
    background-color 0.3s ease,
    transform 0.2s ease;   /* 👈 wichtig */
}

.newest-shiat-btn:hover {
  background-color: #E9D899;
  transform: scale(1.05); /* 👈 minimal größer */
}



/* Optional: mobilfreundlich */
@media (max-width: 600px) {

  .button-deco-img-L {
    display: none;
    position: absolute;
  }

}


/* Utility */
#ugly-link {
  color: #E808CA !important;
  text-decoration: none;
  font-size: 1.4em;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

#ugly-link:hover {
  font-size: 1.5em;
}

.arc-decoration {
  display: flex;
  flex-direction: row;
  align-items: flex-end; /* keeps Jun level with Arc box bottom */
  justify-content: center; /* keeps Arc box centered */
  position: relative; /* allows Jun to be absolutely positioned inside */
  margin: 0;
  width: 100%;
}

.Arc {
    text-align: center;
    text-decoration: underline;
    padding-bottom: 10px;
    padding-top:15px;
    
}
.content {
  display:flex;
  justify-content:space-evenly;
  margin: 0px;
}

.glossar {
  display:flex;
  justify-content: center;
  flex-direction: column;
}

.g-border {
border-style:solid;
  border-width: 2px;
  border-color:#1d1815;
  padding: 13px;
}

@media (max-width: 768px) {
  .content {
    flex-direction: column;
    align-items: center; 
  }

  .cover {
margin-bottom: 20px;
height: 80%;
width: 80%;
}

}



.chapter {
    text-decoration: none;
    font-size: 1.4em;
    transition: all 0.3s ease-in-out;
}

.chapter:hover {
    text-decoration: underline;
    color:#E9D899 !important;
    cursor: pointer;
}

.chapter-box {
    margin: 0px ;
    padding-bottom: 100px;
    position: relative;
    text-align: center
}

/* --- Base: Jun sticks to bottom-right of ul --- */
#Arc-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* keeps list centered */
  justify-content: flex-start;
}

/* Keep list centered regardless of Jun */
ul {
  text-align: center;
  padding-bottom: 20px;
  margin: 0 auto;
  position: relative;
}

#jun {
  position: absolute;
  right: -118px;   /* matches .body padding */
  bottom: 0;
  margin: 0;
  z-index: 3;
}

#jun img {
  width: 136px;
  max-width: 22vw;
  height: auto;
  opacity: 0%; /* remove that property, after the Yamoto arc! */
}

/* ====== Mid-size breakpoint (tablet-ish) ====== */
@media (max-width: 1100px) {
  #jun {
    right: -108px;
    bottom: 10px;
  }

  #jun img {
    width: clamp(80px, 11vw, 130px);
  }
}

/* ====== Smaller screens ====== */
@media (max-width: 800px) {
  #jun {
    right: -44px;
    bottom: 20px;
  }

  #jun img {
    width: clamp(60px, 18vw, 100px);
  }
}

/* ====== Very small screens (mobile, ~480px) ====== */
@media (max-width: 480px) {
  #jun {
    right: -39px;
    bottom: 40px;
  }

  #jun img {
    width: clamp(40px, 25vw, 70px);
  }
}

li {color: black(255, 0, 208);
    list-style-type: none; 
    font-weight: bold;
    font-size:large;
    margin: 7px 2px;
}

#unreleased {
  text-decoration:line-through;
}

#unreleased:hover {
  color:#E808CA!important;
}

#creator {
  color:#DFD4D1 !important;
  padding-top: 2px;
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 5em;
}

.about-creator {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 50px;
    text-align: center;
    padding: 40px 20px;
    background-color: #000000;
}

#avatar{
    border-radius: 50%;
    align-self: center;
}

.footer {
    padding: 20px 20px;
    margin: 0px;
    background-color: #968170;
}

#copyright {
  font-size: 0.7em;
  text-align: center;
}

#about-me {
    padding-top: 15px;
    color:#DFD4D1 !important;
    width: 80%;
    text-align: center;
    align-self: center;
}

#selected {
    color:#E9D899 !important;
}

#jumpTopBtn {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;          /* Text + Icon inline */
    align-items: center;           /* vertikal zentrieren */
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-family: "Amatic SC", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 2em;
    color: #E808CA;
    --icon-color: #E808CA;                /* DEFAULT Farbe für Text + Pfeil */
    background: linear-gradient(to right, transparent, transparent);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    z-index: 1000;
    text-decoration: none;         /* Unterstreichung entfernen */
}

/* Text innerhalb des Buttons übernimmt Farbe */
#jumpTopBtn span {
    color: inherit;               /* erbt Farbe vom Button */
    font-weight: bold;            /* Fett auch hier */
}

/* Pfeil übernimmt Farbe */
#jumpTopBtn .arrow {
    display: inline-block;
    color: inherit;
    width: 30px;
    height: 30px;
    margin-bottom: -9px; /* kleiner Offset für perfekte optische Zentrierung */
}

#jumpTopBtn svg path {
  fill: var(--icon-color) !important;
  transition: fill 0.3s ease-in-out;
}

#jumpTopBtn:hover {
  --icon-color: #E9D899;
  color: #E9D899;
}

/* Hover-Effekt für Text und Pfeil */
#jumpTopBtn:hover {
    color: #E9D899;                /* Hover-Farbe für Text + Pfeil */
    background: linear-gradient(90deg, rgba(233,216,153,0.2), rgba(232,8,202,0.2));
}


#to-top {
  font-size: larger;
}